<template>
    <div>
        <div class="p40">
            <el-form :inline="true">
                <el-form-item label="类型">
                    <el-select v-model="search.add_type" @change="fetchListData">
                        <el-option label="所有" value="0"></el-option>
                        <el-option label="减分" value="-1"></el-option>
                        <el-option label="加分" value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="时间">
                    <el-date-picker v-model="search.timeRange" type="datetimerange" @change="transformTimeRange" placeholder="选择时间范围"> </el-date-picker>
                </el-form-item>
            </el-form>

            <section v-loading="isLoading">
                <div @click="link(item)" v-for="item in list" :key="item.id" class="p10 ui-border-bottom">
                    <div class="mb10 flex row-between" style="width:250px">
                        <div class="flex-1 clamp-1">{{item.desc}}</div>
                        <span>
                            <i class="f-color-orange f18">{{item.change>=0?'+':'-'}}{{item.change}}</i>
                            积分
                        </span>
                    </div>
                    <div class="f-color-grey f10">{{item.create_time}}</div>
                </div>
            </section>

            <section  class="text-center mt10">
                <el-pagination 
                    @current-change="fetchListData"
                    :current-page.sync="pageCurrent"
                    :page-size="pageSize"
                    layout="prev, pager, next, jumper"
                    :total="pageTotal">
                </el-pagination>
            </section >
        </div>
    </div>
</template>
<script>
    export default {
        data(){
            return {
                list:[],
                search:{
                    add_type:'',
                    begin_time:'',
                    end_time:'',
                    timeRange:[],
                },
                pageCurrent:1,
                pageSize:10,
                pageTotal:0,
                isLoading:false
            }
        },
        methods:{
            fetchListData(){
                this.isLoading = true
                this.$http.get('index.php?g=home&m=Users&a=score_log', {
                    params: Object.assign({},this.search,{
                        page_size:this.pageSize,
                        page_no:this.pageCurrent
                    })
                })
                .then(({data})=>{
                    console.log('积分记录',data)
                    if (data.code===1) {
                        this.list = data.data
                        this.pageTotal = parseInt(data.total)
                        this.isLoading=false
                    }
                })
            },
            transformTimeRange(v){
                if (v) {
                    let str = v.split(' - ')
                    this.search.begin_time = str[0]
                    this.search.end_time = str[1]

                    // 查询数据
                    this.fetchListData()
                }
            }
        },
        mounted(){
            this.fetchListData()
        },
    }
</script>